<script setup>
import {useHomeStore} from "@/stores/home";
import {setShareSentence, setShowWeather, setTimeType, setSearchResultsOption} from "@/api/user";
import {reactive, toRefs} from "vue";

const store = useHomeStore();

const data = reactive({
  darkMode: false,
  smoothMode: false,
});
const {darkMode, smoothMode} = toRefs(data);

const shareSentenceOptions = [
  { label: "全部" },
  { label: "禁用" },
  { label: "漫画" },
  { label: "游戏" },
  { label: "文学" },
  { label: "原创" },
  { label: "影视" },
  { label: "诗词" },
  { label: "网易云" },
  { label: "来自网络" },
];

const handleShareSentence = (e) => {
  setShareSentence(e).then((res) => {
    if (res.code === 20000) {
      store.setShareSentence(e);
    }
  });
};

const handleShowWeather = (e) => {
  setShowWeather(e).then((res) => {
    if (res.code === 20000) {
      store.setShowWeather(e);
    }
  });
};
const handleTraceless = (e) => {
 store.Traceless = e
};
const handleisShowMusic = (e) => {
 store.isShowMusic = e
 console.log(store.isShowMusic);
};

const handleTimeType = (e) => {
  setTimeType(e).then((res) => {
    if (res.code === 20000) {
      store.setTimeType(e);
    }
  });
};

const handleSearchResultsOption = (e) => {
  setSearchResultsOption(e).then((res) => {
    if (res.code === 20000) {
      store.setSearchResultsOption(e);
    }
  });
};
</script>

<template>
  <el-scrollbar max-height="300px">
    <div class="setting-group">
      <h2>通用</h2>
      <div class="setting-item">
        <span>显示分享句子（一言）</span>
        <el-select
            :model-value="store.shareSentence"
            @change="handleShareSentence"
            placeholder="请选择"
            class="drop-menu"
        >
          <el-option
              v-for="item in shareSentenceOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </div>
      <div class="setting-item">
        <span>显示今日天气（和风天气）</span>
        <el-switch
            style="--el-switch-on-color: #13ce66"
            :model-value="store.showWeather"
            @change="handleShowWeather"
            size="large"
        />
      </div>
      <div class="setting-item">
        <span>无痕搜索（暂停历史记录）</span>
        <el-switch
            style="--el-switch-on-color: #13ce66"
            :model-value="store.Traceless"
            @change="handleTraceless"
            size="large"
        />
      </div>
      <div class="setting-item">
        <span>音乐播放器</span>
        <el-switch
            style="--el-switch-on-color: #13ce66"
            :model-value="store.isShowMusic"
            @change="handleisShowMusic"
            size="large"
        />
      </div>
      <div class="setting-item">
        <span>时钟类型</span>
        <div>
          <el-radio-group
              :model-value="store.timeType"
              @change="handleTimeType"
              fill="#000"
          >
            <el-radio-button label="钟表" />
            <el-radio-button label="文字" />
          </el-radio-group>
        </div>
      </div>
      <div class="setting-item">
        <span>搜索结果附加选项</span>
        <div>
          <el-radio-group
              :model-value="store.searchResultsOption"
              @change="handleSearchResultsOption"
              fill="#000"
          >
            <el-radio-button label="历史记录" />
            <el-radio-button label="翻译" />
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="setting-group">
      <h2>主题（待开发）</h2>
      <div class="setting-item">
        <span>深色模式</span>
        <el-switch
            style="--el-switch-on-color: #13ce66"
            v-model="darkMode"
            :disabled="true"
            size="large"
        />
      </div>
    </div>
    <div class="setting-group">
      <h2>系统相关（待开发）</h2>
      <div class="setting-item">
        <span>流畅模式</span>
        <el-switch
            style="--el-switch-on-color: #13ce66"
            v-model="smoothMode"
            :disabled="true"
            size="large"
        />
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="less" scoped>
.setting-group {
  color: black;
  margin-bottom: 1rem;

  h2 {
    font-size: 1.15rem;
  }
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .25rem;

    .drop-menu {
      width: 100px;
    }
  }
}
</style>